<template>
  <dv-border-box-12 class="box">
    <div :id="id" :style="{height:height,width:width} " />
  </dv-border-box-12>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@/components/Charts/mixins/resize'
import { updateLineChart } from '@/api/dataManagement'
// import { fetchRegionData } from '@/api/home'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      // default: '300px'
      default: '100%'
    },
    height: {
      type: String,
      default: '325px'
    }
  },
  data() {
    return {
      chart: null,
      flag: false,
      realTimeData: {
        temp: { equipmentNumber: 'bd16265282985790001' },
        i1data: [],
        i2data: [],
        i3data: [],
        i4data: []
      }
    }
  },
  mounted() {
    this.timer = setInterval(this.update, 1000 * 60 * 15)
    this.$nextTick(() => {
      this.initChart()
      this.update()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    update() {
      updateLineChart(this.realTimeData.temp).then((res) => {
        this.realTimeData.i1data = res.data.i1data
        this.realTimeData.i2data = res.data.i2data
        this.realTimeData.i3data = res.data.i3data
        this.realTimeData.i4data = res.data.i4data
        this.chart.setOption({
          series: [
            {
              type: 'line',
              data: this.realTimeData.i1data,
              yAxisIndex: 0
            },
            {
              type: 'line',
              data: this.realTimeData.i2data,
              yAxisIndex: 0
            },
            {
              type: 'line',
              data: this.realTimeData.i3data,
              yAxisIndex: 1
            },
            {
              type: 'line',
              data: this.realTimeData.i4data,
              yAxisIndex: 1
            }
          ]
        })
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          text: '测试图',
          left: 'center',
          top: '5%',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '15%',
          right: '15%',
          top: '40%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // bottom: 0,
          top: 50,
          icon: 'rect',
          itemHeight: 3,
          itemGap: 7,
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          type: 'time'
        },
        yAxis: [{
          name: '电位',
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#4a5867']
            }
          }
        },
        {
          name: '梯度',
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#4a5867']
            }
          }
        }
        ],
        symbol: 'emptyCircle',
        series: [
          {
            name: '保护侧电位',
            type: 'line',
            data: []
          },
          {
            name: '未保护侧电位',
            type: 'line',
            data: []
          },
          {
            name: '南北地电位梯度',
            type: 'line',
            data: []
          },
          {
            name: '东西地电位梯度',
            type: 'line',
            data: []
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .box {
    box-shadow: 0 8px 16px 0 rgb(21, 20, 20);
    /*background-color: #162d7d;*/
    /*background-color: #2c3e50;*/
  }
  .box:hover {
    /*box-shadow: 0 8px 16px 0 rgb(21, 20, 20);*/
  }
</style>
